先介绍几个方法：

1.SSR 服务器渲染；

2.静态化；

3.-spa-;

4.用于爬虫处理。

第一次审查seo：

搜索引擎优化（ ，简称seo），是指提高网页在搜索引擎自然搜索结果（非商业推广结果）中的数量和排名的优化行为，以便从搜索引擎中获得更多的自由. 交通，更好的形象。

Vue 对 SEO 太不友好了。单页SPA应用实时渲染，爬虫无法爬取。写完一个Vue写的官网，老板突然说需要SEO。我很困惑，所以我被迫打开它。了解如何优化它。

1. SSR：

这个vue官方有文档（官方地址），但是对vue版本有要求，对服务器有一定要求。它需要支持环境。其他环境也可以，代码需要重新重写。

使用 SSR 的权衡：

受限于开发条件，浏览器专用代码只能在某些生命周期钩子中使用；一些外部扩展库 ( ) 可能需要特殊处理才能在服务器渲染的应用程序中运行；环境和部署要求较高，需要Node.js运行环境；在高流量的情况下，请准备相应的服务器负载并明智地采用缓存策略。

优势：

更好的 SEO，因为搜索引擎爬虫可以直接查看完全呈现的页面；更快的内容到达时间，特别是对于慢速网络条件或慢速设备。

不足之处：（开发中遇到的坑）

1.一套代码和两套执行环境会造成各种问题，比如没有服务器，没有对象，处理方法是增加判断，如果是客户端，只执行：

if(process.browser){
   console.log(window);
}

使用 dom 操作参考 npm 包，例如： wowjs ，不能使用的方式，改用：

if (process.browser) {
  var { WOW } = require('wowjs');
  require('wowjs/css/libs/animate.css');
}

2.Nuxt方法，在初始化页面之前获取数据搜索引擎优化，但只针对页面组件调用：

// 并发加载多个接口：
 async asyncData ({ app, query }) {
   let [resA, resB, resC] = await Promise.all([
      app.$axios.get('/api/a'),
      app.$axios.get('/api/b'),
      app.$axios.get('/api/c'),
   ])
   
   return {
     dataA: resA.data,
     dataB: resB.data,
     dataC: resC.data,
   }
}

获取参数：

1.获取动态路由参数，如：

/list/:id' ==>  '/list/123

接管：

async asyncData ({ app, query }) {
  console.log(app.context.params.id) //123
}

2.获取网址？获取参数，如：

/list?id=123

接管：

async asyncData ({ app, query }) {
  console.log(query.id) //123
}

3.如果使用v-if语法，在线部署时也可能会遇到这个错误：

应用程序时出错：到“节点”上的“”：此节点类型不是这个。

在 .We [as ]

根据nuxt上issue的tip 1552，将v-if改为v-show语法。

2.静态化

Nuxt.js 执行静态打包时会忽略动态路由。

-| pages/
---| index.vue
---| users/
-----| _id.vue

需要动态路由先生成静态页面。您需要指定动态路由参数的值并将其配置为数组。

// nuxt.config.js
module.exports = {
  generate: {
  routes: [
   '/users/1' ,
   '/users/2' ,
   '/users/3'
  ]
  }
}

运行包查看打包页面。

但是如果路由动态参数的值是动态的而不是固定的呢？

使用返回对象类型的函数；

使用回调为 (err, ) 的函数。

// nuxt.config.js
import axios from 'axios'
 
export default {
  generate: {
  routes: function () {
   return axios.get( 'https://my-api/users' )
   .then((res) => {
   return res.data.map((user) => {
    return {
    route: '/users/' + user.id,
    payload: user
    }
   })
   })
  }
  }
}

现在我们可以像这样从 /users/_id.vue 访问它：

async asyncData ({ params, error, payload }) {
  if (payload) return { user: payload }
  else return { user: await backend.fetchUser(params.id) }
}

如果你的动态路由参数很多，比如商品详情，可能高达几万。需要一个接口返回所有的ID，然后在打包的时候遍历ID，打包到本地。如果产品被修改或从货架上移除，则需要重新包装。在产品很多的情况下，包装也很慢，很不现实。

优势：

不足的：

3.预渲染-spa-

如果您只是使用它来改善一些营销页面（例如 /、/about、/ 等）的 SEO，那么您可能需要预渲染。与其使用 Web 服务器实时动态编译 html，不如使用预渲染在构建时简单地为特定路由生成静态 html 文件。优点是设置预渲染更容易，并且可以将您的前端作为一个完全静态的站点。

cnpm install prerender-spa-plugin --save

vue cli 3 vue..js 配置：

const PrerenderSPAPlugin = require( 'prerender-spa-plugin' );
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require( 'path' );
module.exports = {
  configurewebpack: config => {
   if (process.env.NODE_ENV !== 'production' ) return ;
   return {
    plugins: [
     new PrerenderSPAPlugin({
      // 生成文件的路径，也可以与webpakc打包的一致。
      // 下面这句话非常重要！！！
      // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
      staticDir: path.join(__dirname, 'dist' ),
      // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
      routes: [ '/' , '/product' , '/about' ],
      // 这个很重要，如果没有配置这段，也不会进行预编译
      renderer: new Renderer({
       inject: {
        foo: 'bar'
       },
       headless: false ,
       // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
       renderAfterDocumentEvent: 'render-event'
      })
     }),
    ],
   };
  }
}

在 main.js 添加：

new Vue({
  router,
  render: h => h(App),
  mounted () {
  document.dispatchEvent( new Event( 'render-event' ))
  }
}).$mount( '#app' )

注意：模式："" 必须在 .

打包后可以看到文件，打包文件夹/index.html，例如：about => about/index.html，里面包含html内容。

优势：

不足的：

4.用于爬虫处理

它是一个基于内核的无头浏览器，也就是没有UI界面，也就是说，它是一个浏览器，但是里面的点击、翻页等与人相关的操作需要程序设计和实现。

虽然“宣布终止开发”，但 Vue 的 SEO 处理已经很满意了。

这种解决方案实际上是一种旁路机制。原理是通过Nginx配置判断访问的源UA是否为爬虫访问。如果有，将搜索引擎的爬虫请求转发到一个节点搜索引擎优化，然后通过它解析完整的HTML。返回爬行动物。

具体代码戳这里：vue-seo-。

要安装全局、本地、测试：

phantomjs spider.js 'https://www.baidu.com'

如果你在命令行上看到一个 html 推送，那么恭喜你，你已经征服了它。

启动后或者在请求头中使用增加User-Agent值，效果是一样的。

部署上线

在线安装node、pm2、、nginx相关配置：

upstream spider_server {
  server localhost:3000;
}
 
server {
  listen  80;
  server_name example.com;
  
  location / {
   proxy_set_header Host   $host:$proxy_port;
   proxy_set_header X-Real-IP  $remote_addr;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 
   if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider" ) {
   proxy_pass http: //spider_server ;
   }
  }
}

优势：

不足的：

资源搜索网站大全

总结

如果你建的是大型网站，比如商城，不要犹豫，直接去SSR服务器渲染。当然，还有相应的坑等着你。社区更成熟，英语更好。所有问题都可以轻松解决。

如果只是个人博客，公司官网，其他三个都可以。

如果你是针对已经用 SPA 开发并支持节点服务器的项目进行 SEO 优化的，请使用它。

很多信息可咨询http://www.yoyi8.com